import React, { ReactElement, ReactNode } from 'react'
import styles from '@/pages/index.less'
import { Tabs, Button } from 'antd'
import Info from './components/Info'
import Skin from './components/skin'
import Introduce from './components/introduce'
import Recommend from './components/recommend'
import Skill from './components/skill'
import SkillAdmin from './components/skillAdmin'
import Relation from './components/relation'
import { connect } from 'umi'

const { TabPane } = Tabs

function callback(key: string) {
    console.log(key);
}

interface Props {
    hero: any
}

function Index({ hero }: Props): ReactElement {
    return (
        <div className={styles.warp}>
            <div className={styles.card}>
                <Tabs onChange={callback} type="card">
                    <TabPane tab="基本信息" key="1">
                        <Info/>
                    </TabPane>
                    <TabPane tab="英雄皮肤" key="2">
                        <Skin/>
                    </TabPane>
                    <TabPane tab="介绍视频" key="3">
                        <Introduce/>
                    </TabPane>
                    <TabPane tab="出装推荐" key="4">
                        <Recommend/>
                    </TabPane>
                    <TabPane tab="使用技巧" key="5">
                        <Skill/>
                    </TabPane>
                    <TabPane tab="技能管理" key="6">
                        <SkillAdmin/>
                    </TabPane>
                    <TabPane tab="英雄关系" key="7">
                        <Relation/>
                    </TabPane>
                    
                </Tabs>
            </div>
            <Button style={{
                marginTop: 15
            }} onClick={() => {
                console.log(hero)
            }} type="primary">保存</Button>
        </div>
    )
}

export default connect((state: any) => {
    const { hero } = state
    return {
        hero
    }
})(Index)
